<template>
  <div id="cart">
    <div class="classbar">
      <ul>
        <li
          v-for="(item, index) in itemcount"
          :key="index"
          :class="item.isActive ? 'active' : ''"
        >
          {{ item.name }}({{ item.count }})
          <div class="bar" v-if="item.isActive"></div>
        </li>
        <li>分类<i class="bi bi-chevron-expand"></i></li>
      </ul>
    </div>
    <div class="mainlist">
      <van-empty description="购物车空空如也" v-show="cartlist.length == 0" />
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <van-swipe-cell v-for="item in cartlist" :key="item.id">
          <template>
            <div class="cartitem">
              <div class="check">
                <van-checkbox
                  :name="item"
                  ref="checkboxes"
                  checked-color="#ff6040"
                  @click="changed"
                />
              </div>
              <div class="imgbox">
                <img :src="item.img" alt="" class="itemimg" />
              </div>
              <div class="textbox">
                <div class="box1">
                  <p class="title">{{ item.goodsname }}</p>
                  <p class="info">{{ item.goodsname }}</p>
                </div>
                <div class="box2">
                  <span class="price">{{ item.price }}</span>
                  <van-stepper
                    v-model="item.num"
                    @plus="plus(item.id)"
                    @minus="minus(item.id)"
                    :name="item.id"
                  />
                </div>
              </div>
            </div>
          </template>
          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              @click="delGood(item.id)"
              class="del-btn"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox-group>
    </div>
    <div class="suborder">
      <van-submit-bar :price="sumprice" button-text="去结算" @submit="onSubmit">
        <van-checkbox @click="checkAll" v-model="checkall">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { Cartadd, CartDel, Cartedit, Cartget } from "../util/request/api";
import { Dialog, Toast } from "vant";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      checkall: false,
      result: [],
      uid: "",
      cartlist: [],
      itemcount: [
        {
          name: "全部",
          count: 20,
          isActive: true,
        },
        {
          name: "降价",
          count: 4,
          isActive: false,
        },
        {
          name: "常卖",
          count: 2,
          isActive: false,
        },
      ],
    };
  },
  beforeRouteEnter(to, from, next) {
    if (sessionStorage.getItem("user")) {
      next();
    } else {
      Dialog.confirm({
        message: "请先登录",
      })
        .then(() => {
          next("/login");
        })
        .catch(() => {
          next("/home");
        });
      return;
    }
  },
  mounted() {
    this.uid = JSON.parse(sessionStorage.getItem("user")).uid;
    this.getcartlist(this.uid);
  },
  methods: {
    onSubmit() {
      if (this.result.length == 0) {
        Toast("未选择商品");
        return;
      }
      this.changeOrderAction(this.result);
      this.$router.push("/order");
    },
    ...mapActions(["changeOrderAction"]),
    checkAll() {
      if (this.result.length == this.cartlist.length) {
        this.$refs.checkboxGroup.toggleAll(false);
      } else {
        this.$refs.checkboxGroup.toggleAll(true);
      }
    },
    changed() {
      // console.log(this.result);
    },
    minus(id) {
      Cartedit(id, 1)
        .then((res) => {
          if (res.code == 200) {
            this.getcartlist(this.uid);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    plus(id) {
      Cartedit(id, 2)
        .then((res) => {
          if (res.code == 200) {
            this.getcartlist(this.uid);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    delGood(id) {
      CartDel(id)
        .then((res) => {
          if (res.code == 200) {
            Toast("删除成功");
            this.getcartlist(this.uid);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getcartlist(uid) {
      Cartget(uid)
        .then((res) => {
          if (res.code != 200) {
            return;
          }
          if (res.list == null) {
            this.cartlist = [];
          } else {
            this.cartlist = res.list;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  watch: {
    result: function () {
      this.checkall = this.result.length == this.cartlist.length ? true : false;
    },
  },
  computed: {
    ...mapGetters(["getOrderList"]),
    sumprice: function () {
      let sum = 0;
      this.result.forEach((item) => {
        sum += item.price*item.num;
      });
      return sum * 100;
    },
  },
};
</script>

<style scoped>
@import url("../assets/css/cart.css");
.delete-button {
  height: 100%;
}
.van-card {
  width: 90%;
}
</style>